<li class="el-submenu" ng-class="{'is-active': isActive, 'is-opened': isOpen}"
  ng-style="{ 'width': level > 1 ? '100%' : 'auto' }">
  <div class="el-submenu__title" ng-click="toggleMenu()" ng-mouseenter="onMouseenter($event)" ng-mouseleave="onMouseleave($event)"
    ng-style="{ 'width': level > 1 ? '100%' : 'auto', 'border-bottom-color' : level > 1 ? 'transparent' : '', 'background-color': scopeData.backgroundColor, color: scopeData.textColor }">
    <span>{{title}}</span>
    <i class="el-submenu__icon-arrow" ng-style="{ 'float': level > 1 ? 'right' : 'auto' }"
      ng-class="{ 'el-icon-arrow-down': level === 1 || scopeData.mode === 'vertical', 'el-icon-arrow-right': level > 1 && scopeData.mode !== 'vertical' }"></i>
  </div>
  <ul class="el-menu" ng-class="{ 'el-menu--inline': scopeData.mode !== 'vertical' }"
    ng-style="{ 'background-color': scopeData.backgroundColor }" ng-mouseenter="onMouseenter($event)"
    ng-mouseleave="onMouseleave($event)">
    <ng-transclude ng-show="isOpen"></ng-transclude>
  </ul>
</li>